<template>
  <p class="gradient-text">ai数字人服务</p>
  <div class="content">
    <hr />
  <view class="gradient-text">
    数字人（Digital Human）是指通过计算机技术和人工智能技术创建的具有人类外貌和智能行为的虚拟人物。数字人是一种虚拟角色，可以在计算机图形环境中进行模拟和表现，并能与用户进行交互。
    数字人通常包括以下特点：
    外貌和形象：数字人可以具有逼真的外貌和形象，包括面部表情、身体姿态、发型等。通过高级的计算机图形技术和建模技术，数字人的外貌可以非常逼真。
    智能行为：数字人可以拥有一定程度的人工智能，能够根据用户的输入做出相应的回应和反应。它们可以模拟人类的语言交流、情感表达以及决策行为，使得与数字人的互动更加自然和真实。
    交互性：数字人可以与用户进行实时交互，通过语音、手势、面部表情等方式来回应用户的指令或提问。这使得用户能够更加生动地体验与数字人的互动过程。
    应用领域：数字人在虚拟现实（VR）、增强现实（AR）、人机交互、游戏、教育、娱乐等领域都有广泛的应用。它们可以用于虚拟演员、虚拟导游、虚拟助手、虚拟教师等角色。
    数字人的创建涉及多个技术领域，包括计算机图形学、计算机视觉、人工智能、语音识别、自然语言处理等。随着技术的不断进步，数字人的逼真程度和交互能力也在不断提升，未来数字人有望在更多领域发挥重要作用。
  </view>
  </div>
  <div class="content">
    <hr />
    <div class="custom-input">
      <div class="left-pane">
      <component :is="currentPage"></component>
      <div class="button-group">
        <button @click="currentPage = 'API'" class="custom-button">方案一</button>
        <button @click="currentPage = 'speech'" class="custom-button">方案二</button>
        <button @click="currentPage = 'TTS'" class="custom-button">方案三</button>
      </div>
        <button class="convert-button">转换视频</button>
      </div>
      <div v-if="selectedImage" >
        <img :src="selectedImage" alt="Selected" />
      </div>
    </div>

    <VideoPlayer></VideoPlayer>
  </div>

  <div class="content">
    <hr />
    <ImageUpload @uploadImage="showImage" />
  </div>


</template>

<script>
import TTS from './components/TTS.vue';
import speech from "@/components/speech.vue";
import API from "@/components/API.vue";
import VideoPlayer from './components/VideoPlayer.vue'
import ImageUpload from './components/ImageUpload.vue';
export default {
  name: 'App',
  components: {
    API,
    TTS,
    speech,
    VideoPlayer,
    ImageUpload,
  },
  data() {
    return {
      text: '',
      currentPage: 'API',
      selectedImage: null
    }
  },
  methods: {
    showImage(image) {
      this.selectedImage = image;
    }
  }
}
</script>

<style>
img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 10%;
  transition: all 0.3s;
  background: linear-gradient(#fff, #eee);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: 1px solid #ddd;
}
img:hover {
  transform: scale(1.1);
}
.gradient-text {
  background: linear-gradient(to right, #ff0000, #00ff00);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 15px 15px;
  display: block;
  width: 100%;
}
.content {
  border-top: 1px solid #ddd;
  margin-top: 20px;
  display: flex;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 10px;
}

.content hr {
  border: none;
  border-top: 1px solid #ddd;
  margin-top: 20px;
}
.convert-button {
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #007BFF; /* Blue */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition-duration: 0.4s;
}
.convert-button:hover {
  background-color: #0056b3; /* Darker blue */
}
.custom-input {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  justify-content: space-between;
}
.left-pane {
  display: flex;
  flex-direction: column;
}
VideoPlayer {
  flex: 1;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.custom-button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s ease;
}

.custom-button:hover {
  background-color: #0056b3;
}
.button-group{
  padding: 23px;
}
</style>